<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>资讯动态 - 手机端</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #3b82f6;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --radius: 8px;
            --shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--gray-50);
            color: var(--text-primary);
            padding-top: 50px;
            padding-bottom: 60px;
            line-height: 1.5;
        }
        
        /* 导航栏样式 */
        .navbar {
            height: 50px;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 0 15px;
        }
        
        .navbar-brand {
            color: var(--primary);
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .nav-actions {
            display: flex;
            gap: 15px;
            font-size: 1.1rem;
        }
        
        /* 分类标签 */
        .category-bar {
            overflow-x: auto;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 10px 15px;
            scrollbar-width: none;
        }
        
        .category-bar::-webkit-scrollbar {
            display: none;
        }
        
        .category-item {
            padding: 5px 14px;
            margin-right: 8px;
            white-space: nowrap;
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            background-color: var(--gray-100);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 通用文章样式 */
        .news-section {
            margin-bottom: 15px;
        }
        
        .section-title {
            padding: 12px 15px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .news-list {
            background-color: white;
        }
        
        .news-item {
            padding: 12px 15px;
            border-bottom: 1px solid var(--gray-100);
            transition: background-color 0.2s;
        }
        
        .news-item:last-child {
            border-bottom: none;
        }
        
        .news-item:hover {
            background-color: var(--gray-50);
        }
        
        .news-source {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.8rem;
        }
        
        .source-name {
            color: var(--text-secondary);
            margin-right: 10px;
        }
        
        .publish-time {
            color: var(--gray-600);
            font-size: 0.75rem;
        }
        
        .news-title {
            font-weight: 500;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .news-excerpt {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        .news-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            font-size: 0.75rem;
            color: var(--gray-600);
            margin-top: 10px;
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 1. 无图资讯样式 */
        .no-image .news-title {
            font-size: 0.95rem;
        }
        
        .no-image .news-excerpt {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 2. 单图资讯样式 */
        .single-image {
            width: 100%;
            border-radius: var(--radius);
            overflow: hidden;
            margin: 8px 0;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 3. 左侧小图样式 */
        .left-small-image {
            display: flex;
            gap: 10px;
        }
        
        .small-image {
            width: 80px;
            height: 80px;
            border-radius: var(--radius);
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .small-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .small-image-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .left-small-image .news-title {
            font-size: 0.9rem;
            margin-bottom: auto;
        }
        
        /* 4. 三图资讯样式 */
        .three-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            margin: 8px 0;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .three-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 1/1;
        }
        
        /* 5. 大图+小图组合样式 */
        .mixed-images {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 5px;
            margin: 8px 0;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .mixed-images img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .mixed-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 15px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 7px 20px;
            border-radius: 18px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: white;
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }
        
        .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.65rem;
            color: var(--gray-600);
            text-decoration: none;
        }
        
        .nav-tab i {
            font-size: 1rem;
            margin-bottom: 3px;
        }
        
        .nav-tab.active {
            color: var(--primary);
        }
        
        /* 标签样式 */
        .news-tag {
            display: inline-block;
            padding: 1px 6px;
            font-size: 0.7rem;
            border-radius: 3px;
            margin-right: 5px;
        }
        
        .tag-hot {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        .tag-new {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .tag-video {
            background-color: #e0f2fe;
            color: #0284c7;
        }
        
        /* 适配小屏幕 */
        @media (max-width: 320px) {
            .news-title {
                font-size: 0.9rem;
            }
            
            .small-image {
                width: 70px;
                height: 70px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar fixed-top">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <span class="navbar-brand">资讯动态</span>
            <div class="nav-actions">
                <i class="fas fa-search"></i>
                <i class="fas fa-bell"></i>
            </div>
        </div>
    </nav>
    
    <!-- 分类标签栏 -->
    <div class="category-bar d-flex">
        <div class="category-item active">全部</div>
        <div class="category-item">国内</div>
        <div class="category-item">国际</div>
        <div class="category-item">财经</div>
        <div class="category-item">科技</div>
        <div class="category-item">体育</div>
        <div class="category-item">娱乐</div>
        <div class="category-item">健康</div>
        <div class="category-item">教育</div>
    </div>
    
    <!-- 1. 无图资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">今日要闻</h2>
        <div class="news-list">
            <div class="news-item no-image">
                <div class="news-source">
                    <span class="source-name">央视新闻</span>
                    <span class="news-tag tag-hot">热点</span>
                    <span class="publish-time">2小时前</span>
                </div>
                <h3 class="news-title">国家发改委发布重要通知，事关民生保障和经济发展</h3>
                <p class="news-excerpt">通知明确了下一阶段民生保障重点工作，包括稳物价、保供应、促就业等多个方面，将采取一系列措施应对当前经济发展中的挑战，确保经济平稳运行和民生持续改善。</p>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 12.5万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 328</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 156</div>
                </div>
            </div>
            
            <div class="news-item no-image">
                <div class="news-source">
                    <span class="source-name">人民日报</span>
                    <span class="publish-time">5小时前</span>
                </div>
                <h3 class="news-title">我国新能源汽车产业持续增长，上半年出口量同比增长45.6%</h3>
                <p class="news-excerpt">据工信部数据显示，我国新能源汽车产业发展态势良好，上半年产销量和出口量均保持快速增长，产业竞争力不断提升，全球市场份额进一步扩大。</p>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 8.7万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 215</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 98</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 2. 单图资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">国际新闻</h2>
        <div class="news-list">
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">环球时报</span>
                    <span class="news-tag tag-new">新</span>
                    <span class="publish-time">3小时前</span>
                </div>
                <h3 class="news-title">全球气候变化峰会在巴黎召开，多国承诺加大减排力度</h3>
                <p class="news-excerpt">来自全球190多个国家的代表出席了本次峰会，多个国家宣布了新的减排目标和行动计划，呼吁国际社会加强合作，共同应对气候变化带来的挑战。</p>
                <div class="single-image">
                    <img src="https://picsum.photos/id/1059/800/400" alt="气候变化峰会">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 15.3万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 456</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 231</div>
                </div>
            </div>
            
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">国际在线</span>
                    <span class="publish-time">昨天 20:45</span>
                </div>
                <h3 class="news-title">研究发现：全球多地野生动物数量出现回升迹象</h3>
                <p class="news-excerpt">一项覆盖全球的生态研究显示，在各国环保措施的共同作用下，多个濒危物种的数量出现回升迹象，生态保护工作取得积极成效。</p>
                <div class="single-image">
                    <img src="https://picsum.photos/id/237/800/400" alt="野生动物保护">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 7.2万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 187</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 324</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 3. 左侧小图资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">财经资讯</h2>
        <div class="news-list">
            <div class="news-item left-small-image">
                <div class="small-image">
                    <img src="https://picsum.photos/id/180/300" alt="股市动态">
                </div>
                <div class="small-image-content">
                    <div class="news-source">
                        <span class="source-name">财经网</span>
                        <span class="publish-time">1小时前</span>
                    </div>
                    <h3 class="news-title">A股市场震荡上行，科技板块领涨</h3>
                    <div class="news-actions">
                        <div class="action-item"><i class="far fa-eye"></i> 9.8万</div>
                        <div class="action-item"><i class="far fa-comment"></i> 532</div>
                    </div>
                </div>
            </div>
            
            <div class="news-item left-small-image">
                <div class="small-image">
                    <img src="https://picsum.photos/id/201/300" alt="数字经济">
                </div>
                <div class="small-image-content">
                    <div class="news-source">
                        <span class="source-name">经济日报</span>
                        <span class="publish-time">4小时前</span>
                    </div>
                    <h3 class="news-title">数字经济规模持续扩大，成为经济增长新引擎</h3>
                    <div class="news-actions">
                        <div class="action-item"><i class="far fa-eye"></i> 6.5万</div>
                        <div class="action-item"><i class="far fa-comment"></i> 127</div>
                    </div>
                </div>
            </div>
            
            <div class="news-item left-small-image">
                <div class="small-image">
                    <img src="https://picsum.photos/id/160/300" alt="银行业动态">
                </div>
                <div class="small-image-content">
                    <div class="news-source">
                        <span class="source-name">金融时报</span>
                        <span class="publish-time">6小时前</span>
                    </div>
                    <h3 class="news-title">多家银行下调存款利率，释放稳增长信号</h3>
                    <div class="news-actions">
                        <div class="action-item"><i class="far fa-eye"></i> 11.2万</div>
                        <div class="action-item"><i class="far fa-comment"></i> 645</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 4. 三图资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">科技前沿</h2>
        <div class="news-list">
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">科技日报</span>
                    <span class="news-tag tag-new">新</span>
                    <span class="publish-time">2小时前</span>
                </div>
                <h3 class="news-title">2023世界人工智能大会开幕，多项前沿技术集中亮相</h3>
                <p class="news-excerpt">本次大会展示了人工智能在医疗、教育、制造业等多个领域的创新应用，包括自动驾驶、智能机器人、AI辅助诊断等前沿技术。</p>
                <div class="three-images">
                    <img src="https://picsum.photos/id/1/300" alt="AI大会1">
                    <img src="https://picsum.photos/id/2/300" alt="AI大会2">
                    <img src="https://picsum.photos/id/3/300" alt="AI大会3">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 13.7万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 389</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 256</div>
                </div>
            </div>
            
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">IT之家</span>
                    <span class="publish-time">昨天 15:30</span>
                </div>
                <h3 class="news-title">全球首条高温超导高速磁浮试验线建成通车</h3>
                <p class="news-excerpt">该试验线的建成标志着我国在高温超导磁浮技术领域取得重大突破，为未来超高速交通发展奠定了技术基础。</p>
                <div class="three-images">
                    <img src="https://picsum.photos/id/20/300" alt="磁浮列车1">
                    <img src="https://picsum.photos/id/21/300" alt="磁浮列车2">
                    <img src="https://picsum.photos/id/22/300" alt="磁浮列车3">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 9.4万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 421</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 512</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 5. 大图+小图组合资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">体育赛事</h2>
        <div class="news-list">
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">体育新闻网</span>
                    <span class="news-tag tag-hot">热点</span>
                    <span class="publish-time">5小时前</span>
                </div>
                <h3 class="news-title">全国田径锦标赛落幕，多项全国纪录被打破</h3>
                <p class="news-excerpt">为期三天的全国田径锦标赛圆满结束，共有5项全国纪录被打破，展现了我国田径运动的良好发展态势。</p>
                <div class="mixed-images">
                    <img src="https://picsum.photos/id/10/600/400" alt="田径比赛主图">
                    <img src="https://picsum.photos/id/11/300/300" alt="田径比赛图2">
                    <img src="https://picsum.photos/id/12/300/300" alt="田径比赛图3">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 8.6万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 278</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 134</div>
                </div>
            </div>
            
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">足球周刊</span>
                    <span class="publish-time">1天前</span>
                </div>
                <h3 class="news-title">中超联赛：卫冕冠军逆转取胜，继续领跑积分榜</h3>
                <p class="news-excerpt">在本轮焦点战中，卫冕冠军在0-2落后的情况下连扳三球，最终3-2逆转对手，继续在积分榜上领跑。</p>
                <div class="mixed-images">
                    <img src="https://picsum.photos/id/46/600/400" alt="足球比赛主图">
                    <img src="https://picsum.photos/id/47/300/300" alt="足球比赛图2">
                    <img src="https://picsum.photos/id/48/300/300" alt="足球比赛图3">
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 16.8万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 1256</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 876</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 6. 视频资讯列表 -->
    <section class="news-section">
        <h2 class="section-title">视频报道</h2>
        <div class="news-list">
            <div class="news-item">
                <div class="news-source">
                    <span class="source-name">央视新闻</span>
                    <span class="news-tag tag-video">视频</span>
                    <span class="publish-time">1小时前</span>
                </div>
                <h3 class="news-title">探访国家重点实验室：揭秘"人造太阳"研发过程</h3>
                <p class="news-excerpt">记者走进国家重点实验室，近距离探访"人造太阳"装置的研发过程，见证我国在核聚变研究领域的重大进展。</p>
                <div class="single-image" style="position: relative;">
                    <img src="https://picsum.photos/id/169/800/400" alt="人造太阳实验室">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">
                        <i class="fas fa-play"></i>
                    </div>
                    <div style="position: absolute; bottom: 8px; right: 8px; background-color: rgba(0,0,0,0.7); color: white; font-size: 0.7rem; padding: 2px 5px; border-radius: 3px;">05:32</div>
                </div>
                <div class="news-actions">
                    <div class="action-item"><i class="far fa-eye"></i> 21.3万</div>
                    <div class="action-item"><i class="far fa-comment"></i> 567</div>
                    <div class="action-item"><i class="far fa-share-square"></i> 345</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn">加载更多</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-tab active">
            <i class="fas fa-newspaper"></i>
            <span>资讯</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 分类标签切换
        const categoryItems = document.querySelectorAll('.category-item');
        categoryItems.forEach(item => {
            item.addEventListener('click', () => {
                categoryItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                // 切换内容逻辑
            });
        });
        
        // 加载更多功能
        const loadMoreBtn = document.querySelector('.load-more-btn');
        loadMoreBtn.addEventListener('click', () => {
            loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                loadMoreBtn.textContent = '加载更多';
                // 实际项目中添加加载更多内容逻辑
            }, 1500);
        });
        
        // 底部导航切换
        const navTabs = document.querySelectorAll('.nav-tab');
        navTabs.forEach(tab => {
            tab.addEventListener('click', (e) => {
                e.preventDefault();
                navTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
            });
        });
        
        // 点击新闻项进入详情
        const newsItems = document.querySelectorAll('.news-item');
        newsItems.forEach(item => {
            item.addEventListener('click', () => {
                // 跳转到新闻详情页
                console.log('进入新闻详情页');
            });
        });
    </script>
</body>
</html>
    
